import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const columns_2:ProColumns[] = [
    {
      title: '年度',
      dataIndex: 'n1',
      renderText:()=>'2021'
    },
    {
      title: '手术例数',
      dataIndex: 'n1',
      renderText:()=>'100'
    },
  ]
  const [dataList,setDataList] =useState<any>([
    {
      name:'某某医疗器械有限公司',
      name1:'中山大学附属第一医院',
      name2:'南区',
      name3:'江苏省',
      name8:'2023-04-14',
      factory:'达芬奇'
    },
    {
      name:'某某医疗器械有限公司',
      name1:'上海市XXXX医院',
      name2:'南区',
      name3:'上海市',
      name8:'2023-05-10',
      factory:'达芬奇'
    },
    {
      name:'某某医疗器械有限公司',
      name1:'北京大学附属医院',
      name2:'北区',
      name3:'北京市',
      name8:'2023-08-14',
      factory:'直观复兴'
    },
    {
      name:'某某医疗器械有限公司',
      name1:'中山大学附属第一医院',
      name2:'南区',
      name3:'江苏省',
      name8:'2023-07-16',
      factory:'直观复兴'
    },
  ]);
  const columns:ProColumns[] = [
    {
      title:'竞争对手名称',
      dataIndex: 'name',
      ellipsis:true,
    },
    {
      title:'所属厂家',
      dataIndex: 'factory',
      ellipsis:true,
    },
    {
      title:'医院名称',
      dataIndex: 'name1',
      width:200,
      ellipsis:true,
    },
    {
      title:'产品型号',
      dataIndex: 'name9',
      ellipsis:true,
      renderText:()=>'IS3000'
    },
    {
      title:'产品名称',
      dataIndex: 'name9',
      ellipsis:true,
      renderText:()=>'单孔腔镜手术机器人'
    },
    // {
    //   title:'区域',
    //   dataIndex: 'name2',
    // },
    {
      title:'省份',
      dataIndex: 'name3',
    },
    
    {
      title:'装机台数',
      hideInSearch:true,
      dataIndex: 'name7',
      renderText:()=>'4'
    },
    {
      title:'装机时间',
      dataIndex: 'name8',
      hideInSearch:true,
    },
   
    {
      title:'手术例数-2021',
      hideInSearch:true,
      dataIndex: 'name9',
      renderText:()=>'100'
    },
    {
      title:'手术例数-2022',
      hideInSearch:true,
      dataIndex: 'name9',
      renderText:()=>'200'
    },
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1400}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: { },
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <ProFormGroup>
            <ProFormText name="name" width={'md'} label="竞争对手名称" rules={[{ required: true}]}/>
            <ProFormSelect name="name6" width={'md'} label="区域"  options={[{label:'南区',value:'0'},{label:'北区',value:'1'}]} />
            <ProFormSelect name="name62" width={'md'} label="省份" rules={[{ required: true}]} options={[{label:'江苏省',value:'0'},{label:'上海市',value:'1'}]} />
            <ProFormDigit name="name2" width={'md'}  label="装机台数" rules={[{ required: true}]}/>
            <ProFormDatePicker name="name21" width={'md'}  label="装机时间" rules={[{ required: true}]}/>
            <ProFormText name="name22" width={'md'}  label="装机型号" rules={[{ required: true}]}/>

          </ProFormGroup>
          <ProFormGroup>
              <ProFormText name="name3" width={'sm'} disabled label="装机医院" rules={[{ required: true}]}/>
              <Button style={{marginTop:4}} type='primary'>选择</Button>
          </ProFormGroup>
          
          <ProTable dataSource={[{}]}  style={{marginLeft:-20,marginBottom:20}} toolBarRender={() => [
            <Button
              type="primary"
              key="primary"
              onClick={() => {
              
              }}
            >添加
            </Button>,
          ]}
          toolbar={{settings:[]}}search={false} pagination={false} size='small'  id={'id'}
                    columns={columns_2}/>

          <ProFormTextArea name="name11" width={'lg'} label="备注" />
      </DrawerForm>
    </PageContainer>)
}